<template>
  <div class="home">
    <div class="header">
      <div class="top_bj"></div>
      <div class="top_img">
        <img src="@/assets/img/top.png" alt="">
      </div>
    </div>
    <div class="container">
      <div class="cont_left">
        <!-- 模块1 -->
        <!-- 11 -->
        <House />
        <Maintain />
        <Warning :titleShows="true" />
      </div>
      <div class="cont_center">
        <div class="center_info">
          <div class="item">
            <img src="@/assets/img/今日供水@2x.png" alt="">
            <div class="item_text">
              <h2>今日供水</h2>
              <h3>{{this.data.waterCnt}}m³/h</h3>
            </div>
          </div>
          <div class="item">
            <img src="@/assets/img/今日用电量@2x.png" alt="">
            <div class="item_text">
              <h2>今日用电量</h2>
              <h3>{{this.data.elecCnt}}kW.h</h3>
            </div>
          </div>
          <div class="item">
            <img src="@/assets/img/平均吨水耗电@2x.png" alt="">
            <div class="item_text">
              <h2>平均吨水耗电</h2>
              <h3>{{this.data.per}}kW.h/m3</h3>
            </div>
          </div>
        </div>
        <div class="videoBox">
            <div class="iframe_cont">
              <iframe src="https://www.thingjs.com/s/42b084f8caac3039eea4807b" frameborder="0"></iframe>
            </div>
        </div>
        <Working/>
        <!-- <House /> -->
        <!-- <div class="house">
        </div> -->
      </div>
      <div class="cont_right">
        <Loss/>
        <Monitor/>
        <VideoMonitor/>
      </div>
    </div>
  </div>
</template>

<script>

import * as api from '@/assets/utils/api.js'
import Maintain from '@/views/HomeInfo/maintainInfo.vue'
import Working from '@/views/HomeInfo/working.vue'
import House from '@/views/HomeInfo/houseInfo.vue'
import Warning from '@/views/Home/warning.vue'
import Loss from '@/views/Home/loss.vue'
import Monitor from '@/views/Home/monitor.vue'
import VideoMonitor from '@/views/Home/videoMonitor.vue'

export default {
  name: 'Home',
  components: {
    Maintain,
    Warning,
    House,
    Loss,
    Monitor,
    VideoMonitor,
    Working
  },
  data() {
    return {
      data: []
    }
  },
  created() {
    // 接口参数
    setInterval(async()=>{
      const id = { tenantid: 1128, siteId: 1}
      // const res = await api.nowInfo(id)
      // this.data = res.data
    },300)
  },
  mounted() {}
}
</script>

<style lang="scss" scoped>
.home {
  // background-color: #031a44;
  // background: url(@/assets/img/bg2.png) no-repeat center;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;

  // opacity: 0.8;
  .header {
    width: 100%;
    height: .75rem;
    position: relative;
    z-index: 1;

    .top_bj {
      width: 100%;
      height: 48%;
      background: linear-gradient(90deg, #061444 0%, #588FFB 50%, #061446 100%);
      opacity: 0.1;
    }

    .top_img {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      display: flex;

      img {
        width: 5.6rem;
      }
    }
  }

  .container {
    // width: 100%;
    // height: 95%;
    display: flex;
    justify-content: space-between;
    padding: 0 .2rem;
    position: relative;
    top: -20px;

    .cont_left {
      width: 25.5%;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .cont_center {
      width: 47%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .center_info {
        height: 12%;
        padding: 0 .62rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 1;

        .item {
          width: 28%;
          display: flex;
          padding-top: .35rem;

          img {
            width: 30%;
            height: 100%;
            // padding: 9px 19px 0 11px;
          }

          .item_text {
            h2 {
              font-size: 0.18rem;
              color: #fff;
              padding: 0.2rem 0 0.05rem 0;
            }

            h3 {
              font-size: 0.25rem;
              font-family: 'din';
              font-weight: bold;
              color: #46EDE8;
            }
          }

          &:nth-child(1) {
            img {
              padding: 3px 16px 0 8px;
            }
          }

          &:nth-child(2) {
            h3 {
              color: #46A0FF;
            }

            img {
              padding: 4px 19px 0 0;
            }
          }

          &:nth-child(3) {
            img {
              padding: 4px 13px 0 0;
            }

            h3 {
              color: #45FF82;
            }
          }
        }
      }

      .videoBox {
        width: 100%;
        height: 46.9%;
        .iframe_cont{
          width: 100%;
          height: 100%;
          iframe{
            width: 100vw;
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            // z-index: 100;
          }
        }
      }

      .house {}
    }

    .cont_right {
      width: 25.5%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}
</style>